<!-- 流程详情 -->
<template>
  <div class='process_detail'>
    <Row class="detail_title" align="middle">
      <Col span="10">
      <span class="title_text">流程详情</span><span class="title_code">{{info.processNo}}</span>
      </Col>
      <Col span="14">
      <Row type="flex" justify="end">
        <Button type="primary" class="list_btn" ghost @click="editProcess"
          v-if="unlocking('0204050100')">重命名</Button>
        <Button type="primary" @click="addProcess" icon="ios-add"
          v-if="unlocking('0204050200')">新增流程配置</Button>
      </Row>
      </Col>
    </Row>
    <dt-grid ref="table" :columns="columns" :list="list" />
    <page :pageData="pageData" @pageOnChangeFun="pageOnChangeFun"
      @pageOnPageSizeChangeFun="pageOnPageSizeChangeFun">
    </page>
    <Modal v-model="addOrEdit" :title="title" @on-cancel="cancelAddOrEdit" width="80%"
      :footerHide="true" :mask-closable="false">
      <add-or-edit-process v-if="addOrEdit" ref="addEditProcess" @onClose='cancelAddOrEdit'
        @onChangeTable='initData' :processNo='info.processNo' />
    </Modal>
    <check-detail ref="checkDetail" />
    <!-- 新增/重命名流程 -->
    <add-or-edit ref='addOrEdit' @success='onSuccess' />
  </div>
</template>

<script>
  import columnsAll from '../opt/columns.js'
  import addOrEditProcess from './addOrEditProcess.vue'
  import checkDetail from './checkDetail.vue'
  import processApi from '@/biz/flowApproval/processManagement'
  import addOrEdit from './addOrEdit.vue'
  export default {
    components: {
      addOrEditProcess,
      checkDetail,
      addOrEdit
    },
    data() {
      return {
        columns: [],
        pageData: {
          total: 0,
          current: 1,
          rows: 10,
          pageSizeOpts: [10, 20, 30, 40, 50],
        },
        list: [],
        title: '',
        addOrEdit: false,
        checkFlag: false,
        info: {},
        editData: {}
      }
    },
    computed: {},
    watch: {},
    methods: {
      initData() {
        this.cancelAddOrEdit()
        this.$$on('changeProcessList')
        let params = {
          data: {
            processNo: this.info.processNo
          },
          current: this.pageData.current,
          rows: this.pageData.rows,
        }
        processApi.detailList(params).then(res => {
          console.log(res)
          this.list = res.list
          this.pageData.total = parseInt(res.total)
        })
      },
      onChangeProcessList(val) {
        console.log('onChangeProcessList', val)
        this.pageData.current = 1
        this.info = {
          ...val
        }
        this.initData()
      },
      onSuccess(val) {
        this.$$emit('changeProcessTitle', val)
      },
      //重命名
      editProcess() {
        this.$refs.addOrEdit.edit({
          ...this.info
        })
      },
      //新增流程配置
      addProcess() {
        this.addOrEdit = true
        this.title = '新增流程配置'
      },
      //查看
      oncheck(data) {
        console.log(data)
        this.$refs.checkDetail.create(data)
      },
      //编辑
      onEdit(data) {
        this.addOrEdit = true
        this.title = '编辑流程配置'
        this.$nextTick(() => {
          this.$refs.addEditProcess.edit(data)
        })
        console.log(data)
      },
      //删除
      onDelete(data) {
        console.log(data)
        this.$Modal.confirm({
          title: '请确认',
          content: '删除后对应业务将不在执行此流程，是否确认删除？',
          okText: '确认',
          cancelText: '取消',
          onOk: () => {
            console.log(data)
            processApi.detailDelete({
              id: data.id
            }).then(res => {
              this.initData()
            })
          },
        })

      },
      //关闭
      cancelAddOrEdit() {
        this.addOrEdit = false
      },
      // 分页 页码改变事件
      pageOnChangeFun(current) {
        this.initData()
      },
      // 分页 每页条数改变事件
      pageOnPageSizeChangeFun(rows) {
        this.initData()
      },
    },
    created() {},
    mounted() {
      // this.initData()
      this.$refs.table.init(this)
      this.$$on('changeProcessList')
      this.columns = columnsAll.columns(this)
    },
  }
</script>
<style lang='scss' scoped>
  .process_detail {
    .detail_title {
      height: 50px;
      margin-bottom: 20px;

      .title_text {
        display: inline-block;
        font-size: 20px;
        font-weight: 600;
        line-height: 50px;
      }

      .title_code {
        display: inline-block;
        font-size: 16px;
        margin-left: 10px;
        line-height: 40px;
      }
    }

    .list_btn {
      margin-right: 15px;
    }
  }
</style>